<template>
  <div class='container'>
    <el-card>
      <!-- 头部按钮 -->
      <el-row type="flex" justify="end" style="margin-bottom:5px">
         <el-button type="success" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </el-row>
      <!-- 头部表单结构 -->
      <el-form label-width="80px" size="small" ref="ruleForm" :model='formData'>
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select  placeholder="请选择" v-model="formData.subjectID"  @change="changeSubject">
                <el-option :label="item.subjectName" :value="item.id" v-for="item in subjectOption" :key='item.id'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" >
              <el-select  placeholder="请选择" v-model="formData.catalogID">
                <el-option v-for='item in catalogOPtion' :key='item.value' :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select  placeholder="请选择" v-model="formData.tags">
                <el-option v-for='item in tagsOption' :key='item.label' :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" >
              <el-input v-model="formData.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select  placeholder="请选择" v-model="formData.questionType">
                <el-option v-for='item in questionOptions' :key='item.label' :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select  placeholder="请选择" v-model="formData.difficulty">
                <el-option  v-for='item in diffOptions' :key='item.value' :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
                <el-select  placeholder="请选择" v-model="formData.direction">
                <el-option v-for='item in directionOptions' :key='item' :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select  placeholder="请选择" v-model="formData.creatorID">
                <el-option v-for='item in userList' :key='item.id' :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="formData.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="formData.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <!-- 城市 -->
              <el-select  placeholder="请选择" style='width:48%;margin-right:2%' v-model="formData.province" @change="changeCity">
                <el-option v-for='item in provinces' :key='item' :label="item" :value="item"></el-option>
              </el-select>

              <!-- 地区 -->
              <el-select  placeholder="请选择" style="width:50%" v-model="formData.city">
                <el-option v-for='item in citys' :key= 'item' :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align:right">
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- Tebs标签页-->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- Alert警告-->
        <el-alert
           :closable="false"
           :title='`数据一共${title}条`'
           type="info"
           show-icon>
        </el-alert>
        <!--  -->
        <el-tab-pane label="全部" name="first">
          <questions-choice-table :itemList='itemList' @getNewItemList='getItemList()' @getChoice='getItemList()' @getNewListData='getItemList()'></questions-choice-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <questions-choice-table :itemList='itemList'></questions-choice-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <questions-choice-table :itemList='itemList'></questions-choice-table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <questions-choice-table :itemList='itemList'></questions-choice-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页功能 -->
      <el-row type="flex" justify="end">
         <el-pagination
           style="margin-top:10px"
           background
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="formData.page"
           :page-sizes="[1, 2, 3, 5]"
           :page-size="formData.pagesize"
           layout=" prev, pager, next, sizes, jumper"
           :total="title">
         </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { simple } from '@/api/hmmm/directorys.js'
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import { list as userList } from '@/api/base/users.js' // 导入获取用户列表接口
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js' // 导入难度的常量,试题类型,方向
import { provinces, citys } from '@/api/hmmm/citys.js' // 导入城市和地区的常量
import { choice } from '@/api/hmmm/questions.js' // 导入获取试题列表接口
import questionsChoiceTable from '@/module-hmmm/components/questions-choiceTable'
export default {
  name: 'QuestionsChoice',
  components: {
    questionsChoiceTable
  },
  data () {
    return {
      activeName: 'first',
      formData: {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地城市
        city: null, // 城市地区
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        page: 1,
        pagesize: 5,
        chkState: null // 审核状态
      },
      subjectOption: [], // 获取到的学科列表,用来渲染下拉框
      title: 0, // 学科总数量
      catalogOPtion: [], // 获取到目录,渲染下拉框
      tagsOption: [], // 获取到标签页目录
      diffOptions: difficulty, // 获取常量数据
      questionOptions: questionType, // 题型
      directionOptions: direction, // 方向
      userList: [], // 用户列表数据渲染
      provinces: provinces, // 城市信息
      citys: citys, // 城市地区信息
      itemList: [] // 精选试题列表
    }
  },
  methods: {
    // 多个地方需要用到获取精选试题列表请求,封装一个函数
    async getItemList (value) {
      const { data } = await choice(value)
      this.title = data.counts
      this.itemList = data.items
    },
    // 完成搜索功能
    async search () {
      this.getItemList(this.formData)
    },
    // tabs标签页切换功能
    async handleClick (tab) {
      if (tab.index === '0') {
        this.getItemList()
      } else if (tab.index === '1') {
        // 这里需要重新发起请求,获取到数据,然后赋值,渲染页面,传一个参数,待审核参数
        this.getItemList({ chkState: 0 })
      } else if (tab.index === '2') {
        this.getItemList({ chkState: 1 })
      } else {
        this.getItemList({ chkState: 2 })
      }
    },
    // 改变每页条数
    async handleSizeChange (val) {
      // console.log(`每页 ${val} 条`) 获取到每页的条数,发起请求
      // 请求之前先清空表单数据===需要保留page和pagesize的数据
      for (const key in this.formData) {
        if (key !== 'page' && key !== 'pagesize') {
          this.formData[key] = null
        }
      }
      this.formData.pagesize = val
      this.getItemList(this.formData)
    },
    // 改变当前页码
    handleCurrentChange (val) {
      for (const key in this.formData) {
        if (key !== 'page' && key !== 'pagesize') {
          this.formData[key] = null
        }
      }
      this.formData.page = val
      this.getItemList(this.formData)
    },
    // 获取目录,标签
    async changeSubject () {
      // 需要清空表格对应的数据
      this.formData.catalogID = null
      this.formData.tags = null
      // 完成学科change事件，获取到对应的二级目录
      // const { data } = await simple(this.formData.subjectID)
      const { data } = await simple(this.formData)
      this.catalogOPtion = data
      // 获取对应的标签列表数据渲染下拉选项
      const { data: data1 } = await simpleTags(this.formData)
      // console.log(data1)
      this.tagsOption = data1
    },
    // 获取地区信息
    changeCity () {
      // console.log(citys(this.formData.province))
      // 城市切换后,需要清空表格
      this.formData.city = null
      this.citys = citys(this.formData.province)
    },
    // 清除表格数据,重新发起请求
    resetForm () {
      this.formData = {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地城市
        city: null, // 城市地区
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        page: 1,
        pagesize: 5,
        chkState: null // 审核状态
      }
      this.getItemList()
    }
  },
  async created () {
    // 获取学科简单列表
    const { data: { items } } = await list(this.formData)
    // 将获取的学科列表赋值
    // console.log(data)
    this.subjectOption = items
    // 获取用户列表数据
    const { data: { list: userDataList } } = await userList({ page: 1, pagesize: 1000, keyword: '' })
    // console.log(data) 就2条数据吗,是keyword参数问题吗?====>这个参数哪里获取
    this.userList = userDataList
    // 获取城市信息
    this.provinces = this.provinces()
    // console.log(this.provinces())
    // 获取精选试题列表
    const { data } = await choice()
    this.title = data.counts
    this.itemList = data.items
  }
}
</script>

<style scoped lang='scss'>
// .container {
// ::v-deep .el-input {
//   width: 300px ;
//   }
// }
</style>
